<!--
@Descripttion 表格-配置列
@version 1.0.0
@Author Bell
@ 使用（table组件中已经使用，其他位置无需使用）
  引入组件
    import TableSetting from '@/components/table/table-setting'
  注册组件
    components: {
      TableSetting
    }
  使用
    <TableSetting @redraw="redraw" :params="{show: false}" columnMark="columnMark" :columns="[{title: 'ID', key: 'id', show: true}]" />
    @redraw            Function 必填  重绘表格回调函数 无参数
    params             Object   必填  参数 格式{show: false}
    columnMark(唯一值)  String   必填  表格列标识 用于存储表格列配置
    columns            Array    必填  表格列 数组中对象格式见(>数据格式说明1)
    columnsDefault     Array    必填  表格列默认值 同上
    其他说明
      >数据格式说明1：
        {
          title: 'name', // String  必填 表格标题
          key: 'time',   // String  必填 取值字段
          show: true     // Boolean 必填 是否显示
        }
 -->
<template>
  <div class="table-setting-box">
    <div class="table-setting-bg" v-show="params.show" @click="close"></div>
    <div class="table-setting" :class="{'unfold': params.show}">
      <div class="table-setting-content">
        <p class="title">{{$t('table.Form field')}}
        <el-tooltip class="item" effect="dark" :content="$t('table.Restore default Settings')" placement="top">
          <a class="c-primary" @click="restoreDefault"><i class="el-icon-refresh font-bold"></i></a>
        </el-tooltip>
        </p>
        <el-scrollbar>
          <ul>
            <li v-for="(l, index) in columnsList" :key="index + '-' + l.key" v-drag="{callback: dragMove, index: index}">
              <el-checkbox v-stopdrag v-model="l.show" @change="changeColumn">{{l.title}}</el-checkbox>
            </li>
          </ul>
        </el-scrollbar>
      </div>
      <div class="btn-close c-primary cursor-p" @click="close">
        <i class="el-icon-d-arrow-left"></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 参数 格式 {show: false}
    params: {
      required: true,
      type: Object
    },
    // (唯一值) 表格列标识 用于存储表格列配置
    columnMark: {
      required: true,
      type: String
    },
    // 表格列 数组中对象格式见(>数据格式说明1)
    columns: {
      required: true,
      type: Array
    },
    // 表格列-默认值 同上
    columnsDefault: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      columnsList: []
    }
  },
  mounted() {
    this.columnsList = JSON.parse(JSON.stringify(this.columns))
  },
  methods: {
    /**
     * 拖拽回调
     * @param {Object} params index:v-drag中传入的下标, left:左坐标, top:上坐标
     */
    dragMove(params) {
      // 获取目标下标
      let targetIndex = Math.ceil(params.top / 35) // round四舍五入 ceil上进 floor下退
      if (targetIndex < 0) {
        targetIndex = 0
      } else if (targetIndex > this.columnsList.length - 1) {
        targetIndex = this.columnsList.length - 1
      }
      const columnLi = this.columnsList[params.index]
      this.columnsList.splice(params.index, 1)
      this.columnsList.splice(targetIndex, 0, columnLi)
      this.changeColumn()
    },
    /**
     * 恢复默认
     */
    restoreDefault() {
      this.$set(this, 'columnsList', JSON.parse(JSON.stringify(this.columnsDefault)))
      this.changeColumn()
    },
    /**
     * 列改变时触发
     */
    changeColumn() {
      localStorage.setItem(this.columnMark, JSON.stringify(this.columnsList))
    },
    /**
     * 关闭表格配置层
     */
    close() {
      this.params.show = false
      this.$emit('redraw')
    }
  }
}
</script>
<style lang="less" scoped>
.table-setting-box{
  position: absolute;
  width: 100%;
  height: 100%;
}
.table-setting-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 8;
}
.table-setting.unfold {
  width: 260px;
}
.table-setting {
  position: absolute;
  z-index: 9;
  width: 0;
  height: 100%;
  font-size: 16px;
  box-shadow: 0px 0px 4px 0px rgba(187,187,187,0.5);
  overflow: hidden;
  transition: width .2s;
}
.table-setting-content {
  height: 100%;
  background-color: #fff;
  border: 1px solid #dbdbdb;
  .title {
    margin-bottom: 5px;
    padding: 0 20px 0 10px;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    border-bottom: 1px solid #dbdbdb;
  }
  .el-scrollbar {
    height: ~"calc(100% - 46px)";
    ul{
      margin-right: 20px;
      &>li{
        padding: 0 10px;
        width: 100%;
        height: 35px;
        line-height: 35px;
        &:hover {
          background-color: #ecf5ff;
        }
      }
    }
    /deep/ .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .width50 {
    width: 50px;
  }
  .width150 {
    width: 150px;
  }
}
.btn-close {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  right: 0;
  top: 0;
  height: 100%;
  width: 20px;
  background: #fff;
  border: 1px solid #dbdbdb;
  transition: width .2s;
  &:hover {
    background-color: #f9fafc;
    width: 40px;
  }
  .el-icon-d-arrow-left {
    transform: scale(1, 1.5);
  }
}
.el-icon-rank {
  font-size: 18px;
}
</style>
